<template>
  <div class="shopping">
    <nav-bar class="navBar">
      <div slot="left" class="left">
        <router-link to="/">&lt;</router-link>
      </div>
      <div slot="center" class="center">
        <span>购物车</span>
      </div>
      <div slot="right" class="right">
        <span>. . .</span>
      </div>
    </nav-bar>
    <div class="head">
      <span>登录后可同步账户购物车中的商品</span>
      <router-link to="/login">
        <button>登录</button>
      </router-link>
    </div>
    <div class="main">
      <div class="shop">
        <img src="../assets/shopping_1.png" />
      </div>
      <span>登录后可同步购物车中的商品</span>
      <div class="btn">
        <button>
          <img src="../assets/shopping_2.png" />
        </button>
      </div>
    </div>
    <div class="title">
      <span>京东秒杀</span>
    </div>
    <div class="miaoSha">
      <div class="header">
        <span class="left">京东秒杀</span>
        <span class="center">{{ this.date }}</span>
        <span class="right">更多秒杀></span>
      </div>
      <div class="items">
        <div class="photos" v-for="photo in photos" :key="photo.path">
          <img :src="photo.path" /><span>¥{{ photo.price }}</span>
        </div>
      </div>
    </div>
    <div class="text">
      <span>可能你还想要</span>
    </div>
    <div class="wares">
      <div class="goods" v-for="img in wares" :key="img.img">
        <div slot="head">
          <router-link to="/goods"><img :src="img.img" /></router-link>
        </div>
        <div slot="bottom" class="bottom">
          <span class="name">{{ img.name }}</span>
          <span class="price">¥{{ img.price }}</span>
          <span class="comments">{{ img.comments }}</span>
          <input type="button" value="看相似" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import navBar from "../components/navBar.vue";

export default {
  data() {
    return {
      photos: [
        {
          price: "17.9",
          path: require("../assets/photo_1.png"),
        },
        {
          price: "17.8",
          path: require("../assets/photo_2.png"),
        },
        {
          price: "9.9",
          path: require("../assets/photo_3.png"),
        },
        {
          price: "12.9",
          path: require("../assets/photo_4.png"),
        },
        {
          price: "416",
          path: require("../assets/photo_5.png"),
        },
        {
          price: "9.9",
          path: require("../assets/photo_6.png"),
        },
        {
          price: "35.8",
          path: require("../assets/photo_7.png"),
        },
        {
          price: "73",
          path: require("../assets/photo_8.png"),
        },
        {
          price: "309",
          path: require("../assets/photo_9.png"),
        },
      ],
      wares: [
        {
          img: require("../assets/goods_1.png"),
          name: "清扬(CLEAR)洗发露 控油平衡型(去屑+控油)500g洗发水 (氨基酸洗发)",
          price: "47.90",
          comments: "2000+条评论",
        },
        {
          img: require("../assets/goods_2.png"),
          name: "紫光园 麻酱烧饼 火烧芝麻酱烧饼 清真食品早餐空气炸锅食材 北京特产 麻酱烧饼280g*2袋（8个）",
          price: "36.80",
          comments: "5000+条评论",
        },
        {
          img: require("../assets/goods_3.png"),
          name: "初屋 餐桌 实木岩板餐桌现代简约家用小户型大理石餐桌椅组合可伸缩折叠圆桌圆形吃饭桌子 1.35米黑白色【12MM雪山白岩板】 单餐桌",
          price: "1380.00",
          comments: "2万+条评论",
        },
        {
          img: require("../assets/goods_4.png"),
          name: "骏德 衣柜推拉门 简易木质小衣柜衣橱简约现代推拉门衣柜 木 浅胡桃色 A款长80cm宽45cm高180cm",
          price: "238.00",
          comments: "4000+条评论",
        },
        {
          img: require("../assets/goods_5.png"),
          name: "德运 (Devondale) 澳大利亚原装进口 全脂成人奶粉1kg袋装 调制乳奶粉 学生青少年中老年奶粉",
          price: "61.00",
          comments: "8000+条评论",
        },
        {
          img: require("../assets/goods_6.png"),
          name: "御泥坊套装 美白嫩肤补水护肤品套装化妆品水乳女送礼 洗面奶水乳液睡膜面膜眼膜贴素颜霜",
          price: "269.90",
          comments: "1万+条评论",
        },
      ],
      date: 0,
    };
  },
  components: {
    navBar,
  },
  mounted() {
    this.getDate();
  },
  methods: {
    getDate() {
      let h = "00",
        m = 59,
        s = 59,
        t = setInterval(() => {
          s--;
          if (s == 0) {
            m--;
            s = 59;
          } else if (m == 0 && s == 0) {
            clearInterval(t);
            this.getDate();
          }
          return (this.date = h + ":" + m + ":" + s);
        }, 1000);
    },
  },
};
</script>
<style>
.shopping {
  background-color: rgb(246, 246, 246);
  height: 660px;
}
.shopping .navBar {
  height: 45px;
  position: relative;
  border-bottom: 1px solid rgb(245, 245, 245);
  background-color: rgb(255, 255, 255);
}
.shopping .navBar a {
  text-decoration: none;
}
.shopping .navBar .left {
  position: relative;
  float: left;
  margin-top: 5px;
  margin-left: 10px;
  font-size: 25px;
}
.shopping .navBar .center {
  font-size: 18px;
  position: relative;
  float: left;
  margin-left: 95px;
  margin-top: 10px;
}
.shopping .navBar .right {
  position: relative;
  float: right;
  margin-right: 10px;
  font-size: 25px;
}
.shopping .head {
  background-color: rgb(255, 255, 255);
  position: relative;
  height: 60px;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: center;
}
.shopping .head span {
  padding-right: 10px;
  font-size: 14px;
}
.shopping .head button {
  width: 60px;
  height: 30px;
  border-radius: 20px;
  border: none;
  background-color: rgb(246, 51, 22);
  color: rgb(255, 255, 255);
}
.shopping .main {
  position: relative;
  background-color: rgb(246, 246, 246);
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}
.shopping .main .shop {
  margin-top: 80px;
}
.shopping .main .shop img {
  width: 90px;
}
.shopping .main span {
  margin-top: 10px;
  font-size: 15px;
}
.shopping .main .btn {
  margin-top: 100px;
}
.shopping .main .btn button {
  border: none;
  background-color: rgb(246, 246, 246);
}
.shopping .main .btn button img {
  width: 280px;
}
.miaoSha .header {
  width: 100%;
  height: 40px;
}
.miaoSha .header .left {
  float: left;
  margin-left: 8px;
  margin-top: 5px;
  font-size: 14px;
}
.miaoSha .header .center {
  position: relative;
  float: left;
  margin-left: 35px;
  margin-top: 5px;
  height: 20px;
  width: 70px;
  text-align: center;
  background-color: rgb(253, 81, 65);
  color: white;
  border-radius: 7px;
}
.shopping .miaoSha .header .right {
  color: red;
  margin-top: 5px;
  margin-right: 8px;
  font-size: 12px;
  float: right;
}
.shopping .miaoSha .items {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  flex-flow: row;
}
.miaoSha .items .photos {
  display: flex;
  flex-flow: column;
  align-items: center;
  padding-right: 5px;
  height: 60px;
  width: 60px;
}
.miaoSha .items .photos img {
  width: 45px;
}
.miaoSha .items .photos span {
  color: red;
  font-size: 10px;
}
.shopping .title {
  width: 70px;
  font-size: 10px;
  text-align: center;
  color: rgb(153, 153, 153);
  margin-left: 50%;
  transform: translateX(-50%);
}
.shopping .title ::before {
  content: "";
  position: absolute;
  left: 0px;
  top: 50%;
  width: 4px;
  height: 4px;
  background-color: #ccc;
  margin-top: -1px;
  transform: rotate(45deg);
}
.shopping .title ::after {
  content: "";
  position: absolute;
  right: 0px;
  top: 50%;
  width: 4px;
  height: 4px;
  background-color: #ccc;
  margin-top: -1px;
  transform: rotate(45deg);
}
.shopping .text {
  margin-top: 10px;
  width: 100px;
  font-size: 10px;
  text-align: center;
  color: rgb(153, 153, 153);
  margin-left: 50%;
  transform: translateX(-50%);
}
.shopping .text ::before {
  content: "";
  position: absolute;
  left: 0px;
  top: 50%;
  width: 4px;
  height: 4px;
  background-color: #ccc;
  margin-top: -1px;
  transform: rotate(45deg);
}
.shopping .text ::after {
  content: "";
  position: absolute;
  right: 0px;
  top: 50%;
  width: 4px;
  height: 4px;
  background-color: #ccc;
  margin-top: -1px;
  transform: rotate(45deg);
}
.shopping .wares {
  background-color: rgb(246, 246, 246);
}
.miaoSha {
  position: relative;
  display: flex;
  align-items: center;
  flex-flow: column;
  background-color: rgb(255, 255, 255);
  width: 90%;
  overflow: hidden;
  height: 100px;
  border-radius: 10px;
  margin-left: 15px;
  margin-top: 10px;
}
.miaoSha .navBar {
  width: 100%;
  height: 40px;
}
.miaoSha .navBar .left {
  float: left;
  margin-left: 8px;
  margin-top: 5px;
  font-size: 14px;
}
.miaoSha .navBar .center {
  position: relative;
  float: left;
  margin-left: 35px;
  margin-top: 5px;
  height: 20px;
  width: 70px;
  text-align: center;
  background-color: rgb(253, 81, 65);
  color: white;
  border-radius: 7px;
}
.miaoSha .navBar .right {
  color: red;
  margin-top: 5px;
  margin-right: 8px;
  font-size: 12px;
  float: right;
}
.miaoSha .items {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  flex-flow: row;
}
.miaoSha .items .photos {
  display: flex;
  flex-flow: column;
  align-items: center;
  padding-right: 5px;
  height: 60px;
  width: 60px;
}
.miaoSha .items .photos img {
  width: 45px;
}
.miaoSha .items .photos span {
  color: red;
  font-size: 10px;
}
</style>